section[id^=demo-] {
	@include box-shadow(0 0 5em rgba(0,0,0,0.25));
	code {
		&:before {
			display: block;
			color: rgba(255,255,255,0.3);
		}
	}
	form {
		textarea {
			resize: none;
			background-color: $gray;
			width: 100%;
			height: 1em;
			padding: 1.5em;
			color: $grayDarker;
			font-weight: bold;
			border: none;
			outline: none;
			@include box-sizing(border-box);
			@include placeholder(400, $grayDark);
			@include transition(height, 0.2s);
		}
	}
	pre, .output {
		position: relative;
		padding: 1.5em;
		font-size: 50%;
	}
	.code-sample {
		pre {
			margin-bottom: 0;
			&:last-child {
				padding-top: 0;
			}
			&:first-child {
				padding-top: 1.5em; // Readds padding if pre is only child
			}
		}
	}
	.output {
		padding-left: 3.5em;
		background-color: $blue;
		color: $blueDarker;
		font-size: 50%;
		word-wrap: break-word;
		&:before {
			content: '\f064';
			position: absolute;
			top: 0;
			left: 1.3em;
			color: $blueDark;
			font-family: FontAwesome;
			line-height: 4.85em;
		}
	}
}

code[data-language=html] {
	&:before {
		content: 'HTML';
	}
}

code[data-language=javascript] {
	&:before {
		content: 'JS';
	}
}

#secondary-functions {
	section[id^=demo-] {
		position: relative;
		form {
			position: relative;
			&:before {
				content: 'str =';
				position: absolute;
				top: 0;
				left: 1.3em;
				color: lighten($grayDark, 15%);
				font-size: 50%;
				font-weight: 400;
				line-height: 4.3em;
			}
			textarea {
				padding-left: 3.5em;
				font-size: 50%;
			}
		}
	}
	pre {
		padding: 2em 2em 2em 3.7em;
	}
	code[data-language=javascript] {
		&:before {
			content: 'JS';
			position: absolute;
			top: 0;
			left: 1.4em;
			line-height: 5.5em;
		}
	}
}
